<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>菜单管理系统</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../../js/main.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #e6f0ff, #cce0ff);
        }

        .container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(26, 58, 143, 0.1);
            padding: 25px;
            max-width: 1600px;
            margin: 20px auto;
        }

        .search-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        input[type="text"], select {
            padding: 10px 15px;
            border: 1px solid #c7d8ff;
            border-radius: 5px;
            font-size: 14px;
            transition: all 0.3s;
        }

        input[type="text"]:focus, select:focus {
            border-color: #1a3a8f;
            box-shadow: 0 0 0 3px rgba(26, 58, 143, 0.2);
            outline: none;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }

        .btn-primary {
            background: #1a3a8f;
            color: white;
        }

        .btn-primary:hover {
            background: #0d1b4a;
        }

        .btn-success {
            background: #2d8f1a;
            color: white;
        }

        .btn-success:hover {
            background: #1b4a0d;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #e0ebff;
        }

        th {
            background: #f0f5ff;
            color: #1a3a8f;
            font-weight: 600;
        }

        tr:hover {
            background-color: #f8faff;
        }

        .pagination {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 20px;
        }

        .pagination button {
            padding: 8px 16px;
            background: #f0f5ff;
            color: #1a3a8f;
            border: 1px solid #c7d8ff;
        }

        .pagination button:hover {
            background: #e0ebff;
        }

        .pagination select {
            padding: 8px;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .action-buttons button {
            padding: 8px 12px;
            font-size: 13px;
        }

        .btn-edit {
            background: #f0f5ff;
            color: #1a3a8f;
            border: 1px solid #c7d8ff;
        }

        .btn-edit:hover {
            background: #e0ebff;
        }

        .btn-delete {
            background: #ffebee;
            color: #d32f2f;
            border: 1px solid #ffcdd2;
        }

        .btn-delete:hover {
            background: #ffcdd2;
        }

        /* 对话框样式 */
        .dialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .dialog-content {
            background: white;
            padding: 25px;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }

        .dialog-content h3 {
            color: #1a3a8f;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0ebff;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #333;
            font-weight: 500;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #c7d8ff;
            border-radius: 5px;
        }

        .dialog-buttons {
            display: flex;
            justify-content: flex-end;
            margin-top: 25px;
            gap: 15px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .search-bar {
                flex-direction: column;
            }

            .action-buttons {
                flex-direction: column;
            }

            .dialog-content {
                width: 95%;
                padding: 15px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="search-bar">
        <input type="text" id="searchInput" placeholder="菜单名称..." style="flex:1">
        <button class="btn-primary" onclick="loadMenus()">查询</button>
        <button class="btn-success" onclick="showAddDialog()">新增菜单</button>
    </div>

    <table>
        <thead>
        <tr>
            <th style="width: 80px;">菜单ID</th>
            <th>菜单名称</th>
            <th>页面路径</th>
            <th>父菜单</th>
            <th style="width: 80px;">排序</th>
            <th>备注</th>
            <th style="width: 180px;">操作</th>
        </tr>
        </thead>
        <tbody id="dataTable"></tbody>
    </table>

    <div class="pagination">
        <button onclick="prevPage()">上一页</button>
        <span id="pageInfo">第1页/共1页</span>
        <button onclick="nextPage()">下一页</button>
        每页显示：
        <select id="pageSize" onchange="loadMenus()">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
        </select>
    </div>
</div>

<!-- 新增/编辑菜单对话框 -->
<div class="dialog" id="menuDialog">
    <div class="dialog-content">
        <h3 id="dialogTitle">新增菜单</h3>
        <form id="menuForm">
            <input type="hidden" id="menuId">
            <div class="form-group">
                <label for="menuName">菜单名称</label>
                <input type="text" id="menuName" required>
            </div>
            <div class="form-group">
                <label for="menuUrl">页面路径</label>
                <input type="text" id="menuUrl">
            </div>
            <div class="form-group">
                <label for="parentId">父菜单</label>
                <select id="parentId">
                    <option value="0">无(一级菜单)</option>
                </select>
            </div>
            <div class="form-group">
                <label for="sortOrder">排序</label>
                <input type="number" id="sortOrder" min="0" value="0">
            </div>
            <div class="form-group">
                <label for="remark">备注</label>
                <input type="text" id="remark">
            </div>
            <div class="dialog-buttons">
                <button type="button" class="btn-primary" onclick="saveMenu()">保存</button>
                <button type="button" onclick="closeDialog()">取消</button>
            </div>
        </form>
    </div>
</div>

<script>
    currentPage = 1;
    totalPages = 1;
    allMenus = []; // 所有菜单数据
    parentMenus = []; // 父菜单数据

    // 初始化加载数据
    $(document).ready(function() {
        loadMenus();
    });

    function loadMenus() {
        $.ajax({
            url: '/sysMenu/getMenuByPage',
            type: 'GET',
            data: {
                menuName: $('#searchInput').val(),
                current: currentPage,
                pageSize: $('#pageSize').val()
            },
            success: function(response) {
                allMenus = response.records;
                parentMenus = allMenus.filter(menu => menu.parentId === 0);

                renderTable(response);
                updatePagination(response);
            },
            error: function() {
                alert('加载菜单数据失败');
            }
        });
    }

    function renderTable(response) {
        let tbody = $('#dataTable').empty();

        response.records.forEach(menu => {
            // 查找父菜单名称
            const parentMenu = menu.parentId === 0 ? '-' :
                (allMenus.find(m => m.menuId === menu.parentId)?.menuName || '未知');

            tbody.append(`
                <tr>
                    <td>${menu.menuId}</td>
                    <td>${menu.menuName}</td>
                    <td>${menu.menuUrl || '-'}</td>
                    <td>${parentMenu}</td>
                    <td>${menu.sortOrder}</td>
                    <td>${menu.remark || '-'}</td>
                    <td class="action-buttons">
                        <button class="btn-edit" onclick="showEditDialog(${menu.menuId})">编辑</button>
                        <button class="btn-delete" onclick="deleteMenu(${menu.menuId})">删除</button>
                    </td>
                </tr>
            `);
        });
    }

    function updatePagination(response) {
        totalPages = response.pages;
        $('#pageInfo').text(`第${response.current}页/共${totalPages}页`);
    }

    function prevPage() {
        if (currentPage > 1) {
            currentPage--;
            loadMenus();
        }
    }

    function nextPage() {
        if (currentPage < totalPages) {
            currentPage++;
            loadMenus();
        }
    }

    function showAddDialog() {
        $('#dialogTitle').text('新增菜单');
        $('#menuId').val('');
        $('#menuForm')[0].reset();

        // 填充父菜单下拉框
        const parentSelect = $('#parentId').empty();
        parentSelect.append('<option value="0">无(一级菜单)</option>');

        parentMenus.forEach(menu => {
            parentSelect.append(`<option value="${menu.menuId}">${menu.menuName}</option>`);
        });

        $('#menuDialog').css('display', 'flex');
    }

    function showEditDialog(menuId) {
        const menu = allMenus.find(m => m.menuId === menuId);
        if (!menu) return;

        $('#dialogTitle').text('编辑菜单');
        $('#menuId').val(menu.menuId);
        $('#menuName').val(menu.menuName);
        $('#menuUrl').val(menu.menuUrl || '');
        $('#parentId').val(menu.parentId);
        $('#sortOrder').val(menu.sortOrder);
        $('#remark').val(menu.remark || '');

        // 填充父菜单下拉框
        const parentSelect = $('#parentId').empty();
        parentSelect.append('<option value="0">无(一级菜单)</option>');

        parentMenus.forEach(m => {
            if (m.menuId !== menuId) { // 不能选择自己作为父菜单
                parentSelect.append(`<option value="${m.menuId}">${m.menuName}</option>`);
            }
        });

        $('#menuDialog').css('display', 'flex');
    }

    function closeDialog() {
        $('#menuDialog').hide();
    }

    function saveMenu() {
        const menuId = $('#menuId').val();
        const menuData = {
            menuName: $('#menuName').val(),
            menuUrl: $('#menuUrl').val(),
            parentId: parseInt($('#parentId').val()),
            sortOrder: parseInt($('#sortOrder').val()),
            remark: $('#remark').val()
        };

        if (!menuData.menuName) {
            alert('菜单名称不能为空');
            return;
        }

        const url = menuId ? '/sysMenu/updateMenu' : '/sysMenu/addMenu';
        const method = menuId ? 'PUT' : 'POST';

        if (menuId) {
            menuData.menuId = parseInt(menuId);
        }

        $.ajax({
            url: url,
            type: method,
            contentType: 'application/json',
            data: JSON.stringify(menuData),
            success: function() {
                alert('保存成功');
                closeDialog();
                loadMenus();
            },
            error: function() {
                alert('保存失败');
            }
        });
    }

    function deleteMenu(menuId) {
        if (confirm('确定要删除该菜单吗？')) {
            $.ajax({
                url: `/sysMenu/deleteMenu/${menuId}`,
                type: 'DELETE',
                success: function() {
                    alert('删除成功');
                    loadMenus();
                },
                error: function() {
                    alert('删除失败');
                }
            });
        }
    }
</script>
</body>
</html>